<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>京东首页</title>
    <link rel="stylesheet" type="text/css" th:href="@{static/css/jd.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{static/css/style.css}"/>
</head>
<body>

<div id="app">
    <!-- header部分 -->
    <div id="header">
        <div class="header-one">
            <div class="content-width clearfix">
                <img class="bgi-one" th:src="@{static/img/7df3d597fe2e1b98.jpg!cc_990x80!q70.jpg.webp}">
                <a href="#"><img class="goddess-logo" th:src="@{static/img/4e65301f29ec0a9b.jpg.webp}"></a>
            </div>
        </div>
        <div class="header-two clearfix">
            <div class="content-width clearfix">
                <a href="#" class="text-font city-one">
                    <img class="address-logo" th:src="@{static/img/京东_03.png}">
                    <span class="text-red">甘肃</span>
                </a>
                <ul class="ul-one color-hui clearfix">
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">你好，请登录</a>&nbsp;&nbsp;
                    </li>
                    <li class="header-li">
                        <a href="#" class="text-font text-red">免费注册</a>
                        <span class="text-font span-magin">|</span>
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">我的订单</a>
                        <span class="text-font span-magin ">|</span>
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">我的京东</a>
                        <span class="text-font span-magin">|</span>
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">京东会员</a>
                        <span class="text-font span-magin">|</span>
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">企业采购</a>
                        <span class="text-font span-magin">|</span>
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">客服服务</a>
                        <span class="text-font span-magin">|</span>
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">网站导航</a>
                        <span class="text-font span-magin">|</span>
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">手机京东</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="header-three clearfix">
            <div class="content-width clearfix">
                <a href="#" class="jd-logo"></a>
                <div class="search-border clearfix">
                    <!--定义点击事件 数据双向绑定-->
                    <input class="text-input-searc" type="text" v-model="keyword" name="keyword"
                           placeholder="香奈儿香水"/>
                    <div class="text-searcId">
                        <div class="record"></div>
                        <div class="del">
                            <span class="text-mfont text-red del-all">全部删除</span>
                        </div>
                    </div>
                    <a href="#"><img class="camera" th:src="@{static/img/京东_12.png}"></a>
                    <a class="a-search" href="#">
                        <div><img th:src="@{static/img/京东_09.png}" @click="esSearch"></div>
                    </a>
                </div>
                <ul class="ul-two clearfix">
                    <li class=" header-li">
                        <a href="#" class="text-font a-red text-red">家电女神节</a>&nbsp;&nbsp;
                    </li>
                    <li class="header-li">
                        <a href="#" class="link-regist text-font text-red">宠爱节</a>&nbsp;&nbsp;
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">家清纸品</a>&nbsp;&nbsp;
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">鸡蛋</a>&nbsp;&nbsp;
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">运动户外</a>&nbsp;&nbsp;
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">白条免息</a>&nbsp;&nbsp;
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">每100-50</a>&nbsp;&nbsp;
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">低价手机</a>&nbsp;&nbsp;
                    </li>
                    <li class=" header-li">
                        <a href="#" class="text-font text-red">爆款5折</a>
                    </li>
                </ul>
                <div class="shopping-cart">
                    <img class="shopping-logo" th:src="@{static/img/京东_06.png}">
                    <a href="#" class="a-red text-font">我的购物车</a>
                </div>
                <ul class="ul-three">
                    <li>
                        <a href="#" class="a-red text-wbig">秒杀</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="a-red text-wbig">优惠券</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="text-big text-red">PLUS会员</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="text-big text-red">品牌闪购</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="text-big text-red">拍卖</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="text-big text-red">京东家电</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="text-big text-red">京东超市</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="text-big text-red">京东生鲜</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="text-big text-red">京东国际</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="#" class="text-big text-red">京东金融</a>
                    </li>
                </ul>
                <a href="#" class="add-logo text-font"></a>
            </div>
        </div>
    </div>
    <!-- header ===结束=== -->
    <!-- <router-link to="/hash1">切换至com1</router-link>
     <router-link to="/hash2">切换至com2</router-link>-->
    <router-view></router-view>
</div>
<template id="box">
    <div class="content-width clearfix" style="margin-top: 150px">
        <!-- content部分 -->
        <div class="adv-board"></div>
        <div id="content" class="content-width clearfix">
            <div class="content-left">
                <ul>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">家用电器</a>
                        <div class="over-div">
                            <span class="over-span">男装  &gt;</span>
                            <span class="over-span">女装  &gt;</span>
                            <span class="over-span">内衣  &gt;</span>
                            <span class="over-span">童装童鞋  &gt;</span>
                        </div>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">手机</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">运营商</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">数码</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">电脑</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">办公</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">家居 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">家具</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">家装</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">厨具</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">男装</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">女装</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">童装</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">内衣</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">美妆</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">个护清洁</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">宠物</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">女鞋</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">箱包</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">钟表</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">珠宝</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">男鞋 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">运动 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">户外</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">房产 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">汽车 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">汽车用品</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">母婴 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">玩具乐器 </a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">食品 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">酒类 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">生鲜</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">特产</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">艺术 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">礼品鲜花 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">农资绿植</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">医药保健</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">计生情趣 </a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">图书 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">文娱</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">教育</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">机票 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">酒店 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">旅游</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">生活</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">理财 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">众筹 </a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">白条</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">保险</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">安装</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">维修</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">清洗</a>
                        <span class="text-font">/</span>
                        <a href="#" class="text-big text-red">二手</a>
                    </li>
                    <li class="li-left">
                        <a href="#" class="text-big text-red">工业品</a>
                    </li>
                </ul>
            </div>
            <div class="content-mid clearfix">
                <div class="slideshow">
                    <div class="slideshow-img">
                        <img src="img/images/705893ac4c37d7c0.jpg.webp">
                        <img src="img/images/885d0e014e5ed8d1.jpg.webp">
                        <img src="img/images/a06056914e58c8dc.jpg.webp">
                        <img src="img/images/ae127519187467d4.jpg.webp">
                        <img src="img/images/b181d061.jpg">
                        <img src="img/images/d4a8f605.jpg">
                        <img src="img/images/ed71b696429e07cf.jpg.webp">
                    </div>
                    <div class="click">
                        <span class="left">&lt;</span>
                        <span class="right">&gt;</span>
                    </div>
                    <div class="active">
                        <ul class="clearfix active-ul">
                            <li class="active-li"></li>
                            <li class="active-li"></li>
                            <li class="active-li"></li>
                            <li class="active-li"></li>
                            <li class="active-li"></li>
                            <li class="active-li"></li>
                            <li class="active-li active-li-hover"></li>
                        </ul>
                    </div>
                </div>
                <div class="mid-right">
                    <img class="mid-rimg" src="img/8514962a1a96ca67.png.webp">
                    <img class="mid-rimg" src="img/e2d5c2420e55fe28.jpg.webp">
                    <img class="mid-rimg" src="img/f01dcacdb7ab4847.jpg.webp">
                </div>
            </div>
            <div class="content-right">
                <div class="right-top">
                    <a href="#" class="head-portrait">
                        <img class="head-logo"
                             src=""/>
                    </a>
                    <p class="vre-p">
                        <a href="#" class="text-red text-fontd">Hi~欢迎逛京东!</a><br>
                        <a href="#" class="text-red text-fontd">登录</a>
                        <span class="text-font">|</span>
                        <a href="#" class="text-red text-fontd">注册</a>
                    </p><br/>
                    <a href="#" class="ovle ovle-left">新人福利</a>
                    <a href="#" class="ovle ovle-right">PLUS会员</a>
                </div>
                <div class="right-mid">
                    <span>京东快报</span>
                    <a href="#" class="text-font text-red">更多&nbsp;&gt;</a>
                    <ul>
                        <li>
                            <a href="#" class="elip text-font text-red">
                                <span class="bulk a-red">HOT</span>
                                抗击疫情，3Q医用口罩贴心管家守护你的健康
                            </a>
                        </li>
                        <li>
                            <a href="#" class="elip text-font text-red">
                                <span class="bulk a-red">最新</span>
                                降了！iPhone 11官方承认，还买什么小米10！
                            </a>
                        </li>
                        <li>
                            <a href="#" class="elip text-font text-red">
                                <span class="bulk a-red">推荐</span>
                                骁龙865对比麒麟990 5G！差距果然太大！
                            </a>
                        </li>
                        <li>
                            <a href="#" class="elip text-font text-red">
                                <span class="bulk a-red">最新</span>
                                还在为买不到口罩发愁？选它效果更胜一筹！
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="right-bottom text-font">
                    <a href="#" class="a-red text-font">话费</a>
                    <a href="#" class="text-red text-font">机票</a>
                    <a href="#" class="text-red text-font">酒店</a>
                    <a href="#" class="a-red text-font">话费充值</a>
                    <a href="#" class="text-red text-font">流量充值</a>
                    <a href="#" class="text-red text-font">套餐变更</a><br>
                    <label>号码<input type="text" class="input"/></label><br>
                    <label for="money">面值</label>
                    <select id="money" class="input text-font elip">
                        <option>10元</option>
                        <option>20元</option>
                        <option>30元</option>
                        <option>50元</option>
                        <option selected="selected">100元</option>
                        <option>200元</option>
                        <option>300元</option>
                        <option>500元</option>
                    </select>
                    <p class="a-red text-font">￥98.0-￥100.0</p>
                    <a href="#" class="ovle1">快速充值</a>
                </div>
            </div>
        </div>
        <!-- content ===结束=== -->
        <!-- 京东秒杀 -->
        <div id="seckill" class="content-width clearfix">
            <a href="#">
                <div class="seckill-div">
                    <img class="seckill-logo" src="img/秒杀top_01.png">
                    <div class="seckill-divconner">
                        <span class="seckill-logotime">02</span>
                        <span class="seckill-logomh">:</span>
                        <span class="seckill-logotime">00</span>
                        <span class="seckill-logomh">:</span>
                        <span class="seckill-logotime">00</span>
                    </div>
                </div>
            </a>
            <div class="fleft">
                <a href="#"><img class="seckill-img" src="img/6e37e5ddfa809f8e.png.webp"></a>
                <div class="margin-l">
                    <a href="#" class="elip text-font text-red">
                        智云（zhi yun）Smooth Q2手机稳定器 手持云台稳定器 三轴迷你云台 户外运动 VLOG直播摄影
                    </a>
                    <a href="#" class="blo1">￥138.00</a>
                    <a href="#" class="blo2">450.99</a>
                </div>
            </div>
            <div class="fleft">
                <a href="#"><img class="seckill-img" src="img/8adc528c2c174ebe.jpg.webp"></a>
                <div class="margin-l">
                    <a href="#" class="elip text-font text-red">
                        智云（zhi yun）Smooth Q2手机稳定器 手持云台稳定器 三轴迷你云台 户外运动 VLOG直播摄影
                    </a>
                    <a href="#" class="blo1">￥138.00</a>
                    <a href="#" class="blo2">450.99</a>
                </div>
            </div>
            <div class="fleft">
                <a href="#"><img class="seckill-img" src="img/9fea024237d36250.jpg.webp"></a>
                <div class="margin-l">
                    <a href="#" class="elip text-font text-red">
                        智云（zhi yun）Smooth Q2手机稳定器 手持云台稳定器 三轴迷你云台 户外运动 VLOG直播摄影
                    </a>
                    <a href="#" class="blo1">￥138.00</a>
                    <a href="#" class="blo2">450.99</a>
                </div>
            </div>
            <div class="fleft">
                <a href="#"><img class="seckill-img" src="img/bcb39d5685e7f054.jpg.webp"></a>
                <div class="margin-l">
                    <a href="#" class="elip text-font text-red">
                        智云（zhi yun）Smooth Q2手机稳定器 手持云台稳定器 三轴迷你云台 户外运动 VLOG直播摄影
                    </a>
                    <a href="#" class="blo1">￥138.00</a>
                    <a href="#" class="blo2">450.99</a>
                </div>
            </div>
            <div class="right-r">
                <a href="#"><img class="r-top" src="img/08e59ce576e50475.jpg.webp"></a>
                <p class="r-p">游戏本秒杀专场</p>
                <p class="r-p">爆款低至2499元</p>
                <a href="#">
                    <div class="dp">大牌闪购 &gt;</div>
                </a>
            </div>
        </div>
        <!-- 京东秒杀 ===结束=== -->
    </div>
</template>
<template id="showData">
    <div class="content-width clearfix" style="margin: 0 auto">
        <!-- 排序规则 -->
        <div class="filter clearfix">
            <a class="fSort fSort-cur">综合<i class="f-ico-arrow-d"></i></a>
            <a class="fSort">人气<i class="f-ico-arrow-d"></i></a>
            <a class="fSort">新品<i class="f-ico-arrow-d"></i></a>
            <a class="fSort">销量<i class="f-ico-arrow-d"></i></a>
            <a class="fSort">价格<i class="f-ico-triangle-mt"></i><i class="f-ico-triangle-mb"></i></a>
        </div>
        <!-- 商品详情 -->
        <div class="view grid-nosku">
            <div class="product" v-for="result in results">
                <div class="product-iWrap">
                    &lt;!&ndash;商品封面&ndash;&gt;
                    <div class="productImg-wrap">
                        <a class="productImg">
                            <img :src="result.img">
                        </a>
                    </div>
                    &lt;!&ndash;价格&ndash;&gt;
                    <p class="productPrice">
                        <em>{{result.price}}</em>
                    </p>
                    &lt;!&ndash;标题&ndash;&gt;
                    <p class="productTitle">
                        <a v-html="result.heightTitle[0]"> </a>
                    </p>
                    &lt;!&ndash;出版社&ndash;&gt;
                    <p class="productTitle">
                        <a v-html="result.publish"> </a>
                    </p>
                    &lt;!&ndash; 店铺名 &ndash;&gt;
                    <div class="productShop">
                        <span>店铺： 京东自营店铺 </span>
                    </div>
                    &lt;!&ndash; 成交信息 &ndash;&gt;
                    <p class="productStatus">
                        <span>月成交<em>999笔</em></span>
                        <span>评价 <a>3</a></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<!-- footer -->
<div id="footer">
    <div class="footer-top content-width clearfix">
        <div class="footer-top-block jdsh">
            <span class="footer-spirit spirit-pois1"></span>
            类品齐全，轻松购物
        </div>
        <div class="footer-top-block jdsh">
            <span class="footer-spirit spirit-pois2"></span>
            正品行货，精致服务
        </div>
        <div class="footer-top-block jdsh">
            <span class="footer-spirit spirit-pois3"></span>
            类品齐全，轻松购物
        </div>
        <div class="footer-top-block jdsh">
            <span class="footer-spirit spirit-pois4"></span>
            天天低价，畅选天优
        </div>
    </div>
    <div class="footer-nav content-width clearfix">
        <ul class="f-nav-ul">
            <li><p class="f-nav-p">购物指南</p></li>
            <li><a href="#" class="text-mfont text-red">购物流程</a></li>
            <li><a href="#" class="text-mfont text-red">会员介绍</a></li>
            <li><a href="#" class="text-mfont text-red">生活旅行</a></li>
            <li><a href="#" class="text-mfont text-red">常见问题</a></li>
            <li><a href="#" class="text-mfont text-red">大家电</a></li>
            <li><a href="#" class="text-mfont text-red">客服联系</a></li>
        </ul>
        <ul class="f-nav-ul">
            <li><p class="f-nav-p">购物指南</p></li>
            <li><a href="#" class="text-mfont text-red">购物流程</a></li>
            <li><a href="#" class="text-mfont text-red">会员介绍</a></li>
            <li><a href="#" class="text-mfont text-red">生活旅行</a></li>
            <li><a href="#" class="text-mfont text-red">常见问题</a></li>
            <li><a href="#" class="text-mfont text-red">大家电</a></li>
            <li><a href="#" class="text-mfont text-red">客服联系</a></li>
        </ul>
        <ul class="f-nav-ul">
            <li><p class="f-nav-p">购物指南</p></li>
            <li><a href="#" class="text-mfont text-red">购物流程</a></li>
            <li><a href="#" class="text-mfont text-red">会员介绍</a></li>
            <li><a href="#" class="text-mfont text-red">生活旅行</a></li>
            <li><a href="#" class="text-mfont text-red">常见问题</a></li>
            <li><a href="#" class="text-mfont text-red">大家电</a></li>
            <li><a href="#" class="text-mfont text-red">客服联系</a></li>
        </ul>
        <ul class="f-nav-ul">
            <li><p class="f-nav-p">购物指南</p></li>
            <li><a href="#" class="text-mfont text-red">购物流程</a></li>
            <li><a href="#" class="text-mfont text-red">会员介绍</a></li>
            <li><a href="#" class="text-mfont text-red">生活旅行</a></li>
            <li><a href="#" class="text-mfont text-red">常见问题</a></li>
            <li><a href="#" class="text-mfont text-red">大家电</a></li>
            <li><a href="#" class="text-mfont text-red">客服联系</a></li>
        </ul>
        <ul class="f-nav-ul">
            <li><p class="f-nav-p">购物指南</p></li>
            <li><a href="#" class="text-mfont text-red">购物流程</a></li>
            <li><a href="#" class="text-mfont text-red">会员介绍</a></li>
            <li><a href="#" class="text-mfont text-red">生活旅行</a></li>
            <li><a href="#" class="text-mfont text-red">常见问题</a></li>
            <li><a href="#" class="text-mfont text-red">大家电</a></li>
            <li><a href="#" class="text-mfont text-red">客服联系</a></li>
        </ul>
        <div class="map footer-spirit">
            <p class="fl-nav-p">京东自营覆盖区县</p>
            <p class="text-mfont">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
        </div>
    </div>
    <ul class="footer-ul color-hui clearfix content-width">
        <li class="footer-li">
            <a href="#" class="text-mfont text-red">免费注册</a>
            <span class="text-font f-span-magin">|</span>
        </li>
        <li class=" footer-li">
            <a href="#" class="text-mfont text-red">我的订单</a>
            <span class="text-font f-span-magin ">|</span>
        </li>
        <li class="footer-li">
            <a href="#" class="text-mfont text-red">免费注册</a>
            <span class="text-font f-span-magin">|</span>
        </li>
        <li class=" footer-li">
            <a href="#" class="text-mfont text-red">我的订单</a>
            <span class="text-font f-span-magin ">|</span>
        </li>
        <li class="footer-li">
            <a href="#" class="text-mfont text-red">免费注册</a>
            <span class="text-font f-span-magin">|</span>
        </li>
        <li class=" footer-li">
            <a href="#" class="text-mfont text-red">我的订单</a>
            <span class="text-font f-span-magin ">|</span>
        </li>
        <li class="footer-li">
            <a href="#" class="text-mfont text-red">免费注册</a>
            <span class="text-font f-span-magin">|</span>
        </li>
        <li class=" footer-li">
            <a href="#" class="text-mfont text-red">我的订单</a>
            <span class="text-font f-span-magin ">|</span>
        </li>
        <li class="footer-li">
            <a href="#" class="text-mfont text-red">免费注册</a>
            <span class="text-font f-span-magin">|</span>
        </li>
        <li class=" footer-li">
            <a href="#" class="text-mfont text-red">我的订单</a>
            <span class="text-font f-span-magin ">|</span>
        </li>
        <li class="footer-li">
            <a href="#" class="text-mfont text-red">免费注册</a>
            <span class="text-font f-span-magin">|</span>
        </li>
        <li class=" footer-li">
            <a href="#" class="text-mfont text-red">我的订单</a>
            <span class="text-font f-span-magin ">|</span>
        </li>
        <li class="footer-li">
            <a href="#" class="text-mfont text-red">免费注册</a>
            <span class="text-font f-span-magin">|</span>
        </li>
        <li class=" footer-li">
            <a href="#" class="text-mfont text-red">我的订单</a>
            <span class="text-font f-span-magin ">|</span>
        </li>
        <li class="footer-li">
            <a href="#" class="text-mfont text-red">免费注册</a>
        </li>
    </ul>
    <div class="content-width">
        <div class="text-foo-center">
            <a href="#" class="text-mfont-f text-red">京公网安备 010000020000088号</a>
            <span class="text-font f-span-magin ">|</span>
            <span class="text-mfont-f">京ICP证070359号</span>
            <span class="text-font f-span-magin ">|</span>
            <a href="#" class="text-mfont-f text-red">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
            <span class="text-font f-span-magin ">|</span>
            <span class="text-mfont-f">新出发京零 字第大120007号</span>
        </div>
        <div class="text-foo-center">
            <span class="text-mfont-f">互联网出版许可证编号新出网证(京)字150号</span>
            <span class="text-font f-span-magin ">|</span>
            <a href="#" class="text-mfont-f text-red">出版物经营许可证</a>
            <span class="text-font f-span-magin ">|</span>
            <a href="#" class="text-mfont-f text-red">网络文化经营许可证京网文[2014]2148-348号</a>
            <span class="text-font f-span-magin ">|</span>
            <span class="text-mfont-f">违法和不良信息举报电话：4006561155</span>
        </div>
        <div class="text-foo-center">
            <span class="text-mfont-f text-red">Copyright © 2004 - </span>
            <span class="text-font f-span-magin ">|</span>
            <span class="text-mfont-f">消费者维权热线：4006067733</span>
            <span class="text-font f-span-magin ">|</span>
            <a href="#" class="text-mfont-f text-red">经营证照</a>
            <span class="text-font f-span-magin ">|</span>
            <span class="text-mfont-f">(京)网械平台备字(2018)第00003号</span>
            <span class="text-font f-span-magin ">|</span>
            <a href="#" class="text-mfont-f text-red">营业执照</a>
        </div>
        <div class="text-foo-center">
            <span class="earth-logo"></span>
            <a href="#" class="text-mfont-f text-red">Global Site</a>
            <span class="text-font f-span-magin ">|</span>
            <span class="canada-logo"></span>
            <a href="#" class="text-mfont-f text-red">Сайт России</a>
            <span class="text-font f-span-magin ">|</span>
            <span class="Situs-logo"></span>
            <a href="#" class="text-mfont-f text-red">Situs Indonesia</a>
            <span class="text-font f-span-magin ">|</span>
            <span class="Sitio-logo"></span>
            <a href="#" class="text-mfont-f text-red">Sitio de España</a>
        </div>
    </div>
    <div class="footer-end content-width">
        <span class="footer-spirit end-1"></span>
        <span class="footer-spirit end-2"></span>
        <span class="footer-spirit end-3"></span>
        <span class="footer-spirit end-4"></span>
        <span class="footer-spirit end-5"></span>
    </div>
</div>
<!-- footer ===结束=== -->
<script th:src="@{static/js/京东.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.min.js}" type="text/javascript"></script>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js}" type="text/javascript"></script>
<script th:src="@{https://unpkg.com/vue-router/dist/vue-router.js}"></script>
<script>

    // 1. 定义（路由）组件。
    const com1 = {template: '#box'}
    const com2 = {
        template: '#showData',
        data() {
            return {
                results: []
            }
        },
        mounted() {
            console.log(this.$route.query.datas.data)
            this.results = this.$route.query.datas.data
        }
    }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是 通过 Vue.extend()
    //  创建的组件构造器， 或者，只是一个组件配置对象.
    const routes = [
        {path: '/', redirect: '/hash1'}, ,
        {path: '/hash1', component: com1},
        {path: '/hash2', component: com2}
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })
    new Vue({
        el: "#app",
        data: {
            msg: 'Hello World',
            keyword: ''
        },
        router,
        methods: {
            esSearch() {
                axios.get("http://localhost:8080/es/search/" + this.keyword + "/0/100").then((response) => {
                    console.log(response)
                    let datas = response;
                    //替换路由
                    this.$router.push({path: '/hash2', query: {datas: datas}});
                }, (error) => {
                    console.log(error)
                })
            }
        }
        /*components: {
            'Box': {
                template: '#box',
                data() {
                    return {
                        tag: 'Hello world Tag!!!'
                    }
                }
            }
        },*/

    })
</script>
</body>
</html>
